<template>
    <div class="manage">
        <div class="manage-header">
            <el-form :model="form" :inline="true" label-width="90px">

                <el-form-item label="登录ip">
                    <el-input v-model="form.ip" clearable size="small" placeholder="请输入登录ip"></el-input>
                </el-form-item>

                <el-form-item label="用户名">
                    <el-input v-model="form.name" clearable size="small" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-select v-model="form.status" clearable size="small" placeholder="请选择">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="失败" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="common-table">
            <el-table stripe height="90%" :data="logs">
                <el-table-column prop="user.name" label="用户名"></el-table-column>
                <el-table-column prop="ip" label="IP地址"></el-table-column>
                <el-table-column prop="address" label="登录地"></el-table-column>
                <el-table-column label="操作系统">
                    <template slot-scope="scope">
                        {{ scope.row.os.trim().length ? scope.row.os : '未知' }}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 1" size="mini" type="success" effect="dark">正常</el-tag>
                        <el-tag v-else size="mini" type="danger" effect="dark">失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="msg" label="操作信息" width="180"></el-table-column>
                <el-table-column prop="created_at" label="日期" width="180"></el-table-column>
            </el-table>

            <div class="pager">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change = "pageChanged"
                    :page-size="pageData.limit"
                    :current-page="pageData.page"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

import { getLogList } from "@/api/log"

export default {
    data() {
        return {
            form: {
                name: '',
                ip: '',
                status: '',
            },
            logs: [],
            total: 0,
            pageData: {
                page: 1,
                limit: 10
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            getLogList({params: {...this.pageData, ...this.form}}).then(({ data }) => {
                console.log(data)
                if (typeof data.data !== 'string') {
                    this.logs = data.data
                    this.total = data.meta.total || 0
                }
            })
        },
        pageChanged(val) {
            this.pageData.page = val
            this.getList()
        },
        onSubmit() {
            this.pageData.page = 1
            this.getList()
        }
    }
}
</script>

<style lang="less" scoped>
.manage {
    height: 90%;

    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-form {
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px 0 0 10px;
            margin-bottom: 15px;
            width: 100%;
        }
    }

    .common-table {
        height: calc(100% - 32px);
        position: relative;

        .el-table::before {
            height: 0;
        }

        /deep/.el-table__header-wrapper {
            .cell {
                font-weight: normal;
                color: #666666;
            }
        }

        /deep/.el-table__body-wrapper {
            .cell {
                font-weight: normal;
                color: #333333;
                font-size: 13px;
            }
        }

        .pager {
            position: absolute;
            bottom: 0;
            right: 20px;
        }
    }
}
</style>
